<!-- 
  表格组件  by djn
 -->
<template>
  <div>
    <el-table :ref="refinfo" :data="tableData" v-bind="$attrs" v-on="$listeners" row-key="id">
      <el-table-column
        v-if="refinfo == 'multipleTable'"
        type="selection"
        :selectable="selectable"
        width="55"></el-table-column>
      <el-table-column type="index" label="序号" width="55" v-if="!NoIndex">
        <template #default="scope" v-if="!NoPagination">
          {{ scope.$index + ((page.pageNo === 0 ? 1 : page.pageNo) - 1) * page.pageSize + 1 }}
        </template>
      </el-table-column>

      <el-table-column
        v-for="(item, idx) in tableItems"
        :key="idx"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        :show-overflow-tooltip="item.show_overflow_tooltip"
        :align="item.align"
        v-bind="item.bind"
        v-on="item.on">
        <template v-if="$scopedSlots[item.prop]" #default="scope">
          <slot :name="item.prop" :item="item" v-bind="scope" />
        </template>

        <el-table-column
          align="center"
          v-for="(item, idx) in item.column"
          :key="idx"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :show-overflow-tooltip="item.show_overflow_tooltip"></el-table-column>
      </el-table-column>
    </el-table>

    <el-pagination
      v-if="!NoPagination"
      style="display: flex; justify-content: center"
      v-bind="page"
      :current-page="page.pageNo"
      :pager-count="page.pagerCount"
      @size-change="_c_size_change"
      @current-change="_c_page_change" />
  </div>
</template>

<script>
export default {
  //selectableinfo用于多选的
  props: ['tableData', 'tableItems', 'NoIndex', 'page', 'refinfo', 'NoPagination'],
  data() {
    return {};
  },
  created() {},
  methods: {
    //处理table 禁止选择已经提交的
    selectable(row, index) {
      return row.accident_status === this.selectableinfo; //为true的时候可以选，为false则不可选择
    },

    async _c_size_change(val) {
      await this.$emit('update:page', {
        ...this.page,
        pageSize: val
      });
      this.$emit('page-change', this.page);
    },
    async _c_page_change(val) {
      await this.$emit('update:page', {
        ...this.page,
        pageNo: val
      });
      this.$emit('page-change', this.page);
    }
  }
};
</script>

<style scoped></style>
